import './sass/navbar.scss'

import React, { Component } from 'react'

import Breadcrumb from 'antd/lib/breadcrumb'

//操作栏
class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            crumbArr: [],
            nowPath: ''
        }
    }
    componentDidMount() {
        // this.getCrumb();
    }
    getPath() {
        const path = document.location.pathname;
        const pathArr = path.split('/');
        const nowPath = pathArr[pathArr.length - 1];
        return nowPath;
    }
    makePathChain(path) {
        const navPath = JSON.parse(localStorage.getItem('menu'));        
        let nowCode = '';
        let pathArr = [];
        //获取当前最子路径的name和父code
        const cycPath = function (data) {
            data.forEach((item) => {
                if (item.path === path) {
                    pathArr.push(item.name);
                    nowCode = item.parent;
                }
                else if (item.children.length) {
                    cycPath(item.children);
                }
            })
        }
        //利用code进行递归，将所有父节点放入数组
        const cycCode = function (data) {
            data.forEach((item) => {
                if (item.code === nowCode) {
                    pathArr.push(item.name);
                    nowCode = item.parent;
                    if (item.parent !== 'ROOT') {
                        cycCode(navPath);
                    }
                }
                else if (item.children.length) {
                    cycCode(item.children)
                }
            })
        }
        cycPath(navPath);
        cycCode(navPath);
        return pathArr
    }
    //面包屑导航
    makeCrumb(pathArr) {
        const crumbArr = pathArr.reverse().map((item, index) => {
            return <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>
        })
        this.setState({
            crumbArr
        })
    }
    getCrumb() {
        const nowPath = this.getPath();
        const pathArr = this.makePathChain(nowPath);
        this.makeCrumb(pathArr);
    }
    render() {
        return (
            <div ref={item=>{this.box=item}} className="operbar">
                {/* <Breadcrumb className="navbar-crumb">
                    {this.state.crumbArr}
                </Breadcrumb> */}
                <div>
                    {this.props.children}
                </div>
            </div>
        )
    }
}

export default Navbar